<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <actionsheet @on-after-hide="setFenxiangVal({ show: false, item: {} })" class="bot-tab" v-model="fenxiangVal.show" show-cancel>
      <grid slot="header" class="item-box1" :show-vertical-dividers="false" :show-lr-borders="false" :cols="3">
        <grid-item @click.native="handleFenxiang(item.key)" v-for="(item,i) in itemList" :key="i" :link="item.route" :label="item.title">
          <img class="fenxiang-img" :src="item.url" slot="icon" alt="">
        </grid-item>
      </grid>
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { Tabbar, TabbarItem, Group, Actionsheet, XHeader, Grid, GridItem } from 'vux';
const IndexStore = namespace('list');

@Component({
  components: { Tabbar, TabbarItem, Group, Actionsheet, XHeader, Grid, GridItem }
})
export default class App extends Vue {
  @IndexStore.State fenxiangVal
  @IndexStore.Mutation setFenxiangVal
  itemList = [
    { url: require('../static/weixin.png'), title: '微信', key: 1 },
    { url: require('../static/penyou.png'), title: '微信朋友圈', key: 2 },
    { url: require('../static/qq.png'), title: 'QQ', key: 3 }
  ]
  shareServices = []

  created () {
    document.addEventListener('plusready', () => {
      // 获取支持的分享服务
      plus.share.getServices(services => {
        this.shareServices = services
      })
    }, false);
  }
  handleFenxiang (key) {
    let item = this.fenxiangVal.item
    let self = this
    let shareUrl = 'http://111.231.87.118:3010/download/index.html'
    let shareIcon = 'http://111.231.87.118:3010/logo.jpg'

    let msgWechat = {
      type: 'web',
      extra: {},
      thumbs: [shareIcon], // 缩略图
      href: shareUrl, // 分享url地址
      title: item.category, // 分享标题
      content: item.content // 描述
    }
    let suc = () => {
      this.setFenxiangVal({ show: false, item: {} })
      self.$vux.toast.text('分享成功', 'middle')
    }

    switch (key) {
      case 1: // 微信
        msgWechat.extra.scene = 'WXSceneSession'
        this.shareSdk('weixin', msgWechat, suc)
        break
      case 2: // 微信朋友圈
        msgWechat.extra.scene = 'WXSceneTimeline'
        this.shareSdk('weixin', msgWechat, suc)
        break
      case 3: // QQ
        let msgQQ = {
          type: 'text',
          title: item.content,
          href: shareUrl
        }
        this.shareSdk('qq', msgQQ, suc)
        break
    }
  }
  // APP原生分享
  shareSdk (type, msg, suc, err) {
    // 分享到微信 ==============
    // msg 对象结构
    // 公共部分
    // {
    //   // 分享类型 web:网页分享 text:文本 image:图片
    //   type: 'web',
    //   extra: {
    //     // 分享到哪里：
    //     // 我的好友:  WXSceneSession
    //     // 朋友圈:   WXSceneTimeline
    //     // 我的收藏: WXSceneFavorite
    //     scene:'WXSceneSession'
    //   }
    // }

    // 分享网页
    // {
    //   thumbs: ['http://www.baidu.com/1.jpg'], // 缩略图
    //   href: '', // 分享url地址
    //   title: '', // 分享标题
    //   content: '', // 描述
    // }

    // 分享文本
    // {
    //   content: '' // 文本内容
    // }

    // 分享图片
    // {
    //   pictures: [''[ // 图片url地址，支持多图
    // }

    // 分享到QQ =================
    // 公共部分
    // {
    //   // 分享类型 text:文本 image:图片
    //   type: 'text',
    // }

    // 分享文本
    // {
    //   title: '', // 文本内容
    //   href: '' // url地址
    // }

    // 分享图片
    // {
    //   pictures: [''] // 图片url地址，支持多图
    // }

    suc = suc ? suc : function(){}
    err = err ? err : function(){}

    let ser = this.shareServices.find(v => { return v.id === type })
    if (ser) {
      // 是否授权
      if (ser.authenticated) {
        ser.send(msg, suc, err)
      } else {
        ser.authorize(() => {
          ser.send(msg, suc, err)
        }, err)
      }
    }
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
body,html{
  background:#F5F5F5;
}
.weui-icon-clear{
  color:#BABABA !important;
}
.tag {
  font-size: 12px;
}
.weui-btn {
  font-size: 12px !important;
  line-height: 40px !important;
}
.weui-icon-warn{
  color:#EFA79B !important;
}
.vux-tab-bar-inner{
  background-color:#C57746 !important;
  height:1px !important;
}
.left-arrow:before {
    border: 1px solid #ACADAD;
    border-width: 1px 0 0 1px;
}
#app {
  height: 100%;
  font-size: 14px;
  .vux-header-back {
    display: none;
  }
  .vux-header {
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    .vux-header-title {
      color: #1E2020;
    }
  }
  .my-head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    .vux-header {
      position: initial;
    }
    .vux-tab-wrap {
      z-index: 1;
    }
  }
  .weui-icon-success:before {
    color: #EFA79B;
  }
  /*i {
    color: #EFA79B;
    font-size: 18px;
  }*/
  .icon-down {
    color: #BDBDBD;
    font-size: 14px;
  }
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    // font-size: 12px;
    // color: #EFA79B;
  }
  .weui-uploader__file > img {
    width: 100%;
    height: 100%;
  }
  .vux-icon-dot{
  	/*background-color:#747474;*/
  	&.active{
		  background-color:#ffffff;
  	}
  }
  .item-form {
    color: #8AA2AD;
  }
  ._v-container {
    overflow: initial;
  }
  .weui-cell {
    font-size: 14px;
  }
  .bot-tab {
    .weui-grids {
      width: 100%;
    }
    .item-box1:before {
      content: initial;
    }
    .item-box1:after {
      content: initial;
    }
    .item-box1 {
      .weui-grid {
        padding: 10px 10px;
        color:rgb(93, 191, 232);
      }
      .weui-grid:after {
        content: initial;
      }
      .weui-grid__icon {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .weui-actionsheet__cell {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    i {
      font-size: 40px !important;
    }
  }
}
</style>
